<template>
  <div v-resize="onResize">
    <div class="ana-detail-title">
      <a-icon type="forward" />病例初诊时间分布
    </div>
    <div style="width: 100%; height: 300px" ref="chart"></div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "初诊日期",
      stateKey: "初诊日期",
      step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();

      let option = this.getOption();
      chartUtils.setOption(option);

      setTimeout(() => {
        this.onResize();
      }, 100);
    },
    filterFunc(k, v) {
      let p = new Date(v).getTime();
      if (Number.isNaN(p)) {
        return false;
      }
      if (p < 1609459200000) {
        return false;
      }
      return true;
    },
    getOption() {
      let data = this.reproject();
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["发病人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          top: 15,
          feature: {
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "time",
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: data,
            label: {
              show: true,
            },
            itemStyle:{
              color: '#0b6da0'
            }
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }],
            // },
          },
        ],
      };
      return option;
    },
    reproject() {
      let data = this.chartData
        .filter((v) => !!v)
        .map((v) => new Date(v[this.key]).getTime() / 1000)
        .filter((v) => !!v);
      console.log(data);
      let max = Math.max.apply(null, data);
      max = Math.ceil(max / this.step) * this.step;
      let min = Math.min.apply(null, data);
      min = Math.floor(min / this.step) * this.step;

      let reproject = [];
      let tableData = [];
      for (let i = min; i < max; i += this.step) {
        let c = data.filter((v) => v >= i && v < i + this.step).length;
        if (c == 0) continue;
        let now = new Date(i * 1000);
        reproject.push([
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          c,
        ]);
        tableData.push({
          label: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
            "/"
          ),
          value: c,
          rr: (c / this.chartData.length).toFixed(4),
        });
      }
      this.tableData = tableData;
      return reproject;
    },

    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>